<script>
    // import { onMount } from 'svelte';
    //获得2个时间相差多少分钟
    function getDiffMinute(date1,date2){
        // var reg=new RegExp("-","g"); //创建正则RegExp对象
        // var date1 = date1.replace(reg,"/") ;
        // var date2 = date2.replace(reg,"/") ;
        var date1 = new Date(date1) ;
        var date2 = new Date(date2);
        var s1 = date1.getTime();
        var s2 = date2.getTime();
        return parseInt((s2-s1)/1000) ;
    }
    let NowTime = new Date();
    // onMount(() => {
        setInterval( () => {
            NowTime = new Date()//修改数据让他可以实时更新
            
        }, 1000);
    // });
    var workTime = new Date(); workTime.setHours(9,0,0,0);
    var offWorkTime = new Date(); offWorkTime.setHours(18,0,0,0);
    let d1 = getDiffMinute(workTime,offWorkTime);//上班时间分钟数*60(秒)
    let d2 = getDiffMinute(NowTime,offWorkTime);//下班时间分钟数*60(秒)
    let ccc = '';
    var bbb =setInterval(function () {
       ccc = 0 ? "0%" : (((getDiffMinute(workTime,offWorkTime)- getDiffMinute(NowTime,offWorkTime)) /getDiffMinute(workTime,offWorkTime) * 10000) / 100.00)+"%";
    },1000,bbb)
    
   
</script>
<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" >
    <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: {ccc}"></div>
    <div class="value">{ccc}</div>
</div>
<style>
      .ui-progressbar {
         height: 20px;  /* Can be anything */
         position: relative;
         margin: 10px auto 24px;
         background: #555;
         border-radius: 25px;
         padding: 0px;
       }  

       .ui-progressbar-value {
         display: block;
         height: 100%;
         -webkit-border-radius: 20px 8px 8px 20px;
         -moz-border-radius: 20px 8px 8px 20px;
         border-radius: 20px 8px 8px 20px;
         background-color: #01A4FF;
         background-image: linear,left bottom,left top,color-stop(0, #01A4FF),color-stop(1, #01FFC2);
         -webkit-box-shadow:inset 0 2px 9px  rgba(255,255,255,0.3),inset 0 -2px 6px rgba(0,0,0,0.4);
         -moz-box-shadow:inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
         box-shadow:inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
         position: relative;
         overflow: hidden;
       }

       .ui-progressbar-value:after{
         	content: "";
     			position: absolute;
     			top: 0; 
     			left: 0; 
     			bottom: 0; 
     			right: 0;
     			background-image: -webkit-gradient(linear, 0 0, 100% 100%,  color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent),  color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
     			background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,  transparent 50%,  rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%, transparent 75%,  transparent);
     			z-index: 1;
     			-webkit-background-size: 50px 50px;
     			-moz-background-size: 50px 50px;
     			-o-background-size: 50px 50px;
     			-ms-background-size: 50px 50px;
     			background-size: 50px 50px;
     			animation: move 2s linear infinite;
     			-moz-border-radius: 20px 8px 8px 20px;
     			-webkit-border-radius: 20px 8px 8px 20px;
     			border-radius: 20px 8px 8px 20px;
     			overflow: hidden;
       }
       #progressbar .value{position: absolute;left: 0;right: 0;top: 50%;text-align: center;transform:translateY(-50%);color: antiquewhite;}
       @keyframes move {
   		    0% {
   		       background-position: 0 0;
   		    }
   		    100% {
   		       background-position: 50px 50px;
   		    }
   		}
</style>